<template>
  <div class="p-2">
    <div class="viewBox">
      <div class="title-item">
        <span class="line-box"></span><span>{{ title }}</span>
      </div>
      <!-- 添加或修改实验教学计划对话框 -->
      <el-form ref="teachStandardFormRef" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="名称" prop="standardName">
          <el-input v-model="form.standardName" placeholder="请输入实验教学名称" v-if="type != 2" />
          <div v-else>{{ form.standardName }}</div>
        </el-form-item>
        <el-form-item label="实验目录" prop="contentId">
          <!-- <el-input v-model="form.contentId" placeholder="请输入实验目录" v-if="type != 2" /> -->
          <el-select v-model="form.contentId" placeholder="实验目录" v-if="type != 2">
            <el-option v-for="dict in testList" :key="dict.id" :label="dict.testName" :value="dict.id"></el-option>
          </el-select>
          <div v-else>{{ testName }}</div>
        </el-form-item>
        <el-form-item label="学段" prop="standardPeriod">
          <el-select v-model="form.standardPeriod" placeholder="请选择学段" v-if="type != 2">
            <el-option v-for="dict in sys_period" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
          <div v-else><dict-tag :options="sys_period" :value="form.standardPeriod" /></div>
        </el-form-item>
        <el-form-item label="年级" prop="standardGrade">
          <el-select v-model="form.standardGrade" placeholder="请选择年级" v-if="type != 2">
            <el-option v-for="dict in sys_grade" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
          <div v-else><dict-tag :options="sys_grade" :value="form.standardGrade" /></div>
        </el-form-item>
        <el-form-item label="学科" prop="standardSubject">
          <el-select v-model="form.standardSubject" placeholder="请选择学科" v-if="type != 2">
            <el-option v-for="dict in subjectOptions" :key="dict.id" :label="dict.subjectName" :value="dict.id"></el-option>
          </el-select>
          <div v-else>{{ form.standardSubject }}</div>
        </el-form-item>
        <el-form-item label="附件" prop="attachmentList">
          <fileUpload v-model="form.attachmentList" v-if="type != 2" />
          <fileUpload v-else v-model="form.attachmentList" :isShowTip="false" class="fileView-box" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <editor v-model="form.content" :min-height="192" v-if="type != 2" />
          <div v-else v-html="form.content"></div>
        </el-form-item>
      </el-form>

      <div class="dialog-footer" v-if="type != 2">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      <div class="dialog-footer" v-else>
        <el-button @click="cancel">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script setup name="TeachStandard" lang="ts">
import { listTeachStandard, getTeachStandard, delTeachStandard, addTeachStandard, updateTeachStandard } from '@/api/core/teachStandard';
import { TeachStandardVO, TeachStandardQuery, TeachStandardForm } from '@/api/core/teachStandard/types';
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_notice_type, sys_period, sys_grade } = toRefs<any>(proxy?.useDict('sys_notice_type', 'sys_period', 'sys_grade'));
//学科
import { useSubjectList } from '@/composables/useSubjectList';
const { subjectOptions, fetchSubjectList } = useSubjectList();
// 实验目录
import { listTest} from '@/api/core/test';
const testList = ref([]);
const testName = ref('');
//
const teachStandardList = ref<TeachStandardVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const viewDisabled = ref(false);
const queryFormRef = ref<ElFormInstance>();
const teachStandardFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});
const title = ref('');
const formId = ref<string | number>();
const type = ref<string | number>();

const initFormData: TeachStandardForm = {
  standardName: undefined,
  contentId: undefined,
  standardPeriod: undefined,
  standardSubject: undefined,
  attachmentList: undefined,
  content: undefined,
  standardGrade: undefined
};
const data = reactive<PageData<TeachStandardForm, TeachStandardQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    standardName: undefined,
    contentId: undefined,
    standardPeriod: undefined,
    standardSubject: undefined,
    attachmentList: undefined,
    content: undefined,
    standardGrade: undefined,
    params: {}
  },
  rules: {
    standardName: [{ required: true, message: '实验教学名称不能为空', trigger: 'blur' }],
    contentId: [{ required: true, message: '实验目录不能为空', trigger: 'blur' }],
    standardPeriod: [{ required: true, message: '学段不能为空', trigger: 'change' }],
    standardSubject: [{ required: true, message: '学科不能为空', trigger: 'change' }],
    standardGrade: [{ required: true, message: '年级不能为空', trigger: 'blur' }],
    content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 取消按钮 */
const cancel = () => {
  reset();
  proxy?.$router.go(-1);
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  teachStandardFormRef.value?.resetFields();
};

/** 提交按钮 */
const submitForm = () => {
  teachStandardFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (formId.value) {
        await updateTeachStandard(form.value).finally(() => (buttonLoading.value = false));
        proxy?.$modal.msgSuccess('编辑成功');
      } else {
        await addTeachStandard(form.value).finally(() => (buttonLoading.value = false));
        proxy?.$modal.msgSuccess('新增成功');
      }
      proxy?.$router.go(-1);
    }
  });
};
onMounted(async () => {
  formId.value = route.query && (route.query.id as string);
  type.value = route.query && (route.query.type as string);

  if (type.value === '0') {
    title.value = '新增';
  } else if (type.value === '1') {
    title.value = '编辑';
  } else {
    title.value = '查看';
  }

  if (formId.value) {
    const res = await getTeachStandard(formId.value);
    Object.assign(form.value, res.data);
  }
  try {
    const response = await listTest();
    if (response && response.rows) {
      testList.value = response.rows.map((item) => ({ id: item.id, testName: item.testName }));
      // 查找 form.contentId 对应的 testName
      if (form.value.contentId) {
        const selectedTest = testList.value.find((test) => test.id === form.value.contentId);
        if (selectedTest) {
          testName.value = selectedTest.testName;
        }
      }
    }
  } catch (error) {
    console.error('Error fetching test list:', error);
  }
  // 确保数据加载完成后，再进行渲染
  // await nextTick();
  fetchSubjectList();
});
</script>

<style lang="scss" scoped>
.viewBox {
  margin: 15px 15px 80px 15px;
  width: 800px;
  .title-item {
    display: flex;
    align-items: center;
    height: 24px;
    line-height: 24px;
    font-size: 20px;
    margin: 30px 0 20px;
    span {
      display: inline-block;
      margin: 0 5px;
    }
    .line-box {
      width: 4px;
      height: 24px;
      background: #05afea;
    }
  }
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 300px;
  }
  .topTit {
    margin-top: 10px;
  }
  .el-form-item--default {
    margin: 15px 30px;
  }
  :deep(.el-textarea__inner) {
    width: 300px !important;
  }
  .fileView-box {
    :deep(.upload-file-uploader) {
      display: none !important;
    }
    :deep(.ele-upload-list__item-content-action) {
      display: none !important;
    }
  }

  .dialog-footer {
    margin-top: 40px;
    text-align: center;
  }
}
</style>
